<template>
	<Content :autoBack="false" title="登录">
		<view class="login-box">
			<view class="tip">
				<view class="dt">您好！</view>
				<view class="dd">欢迎登录 华新精科 {{'V' + version}}</view>
			</view>
			<view class="from-box">
				<view class="content">
					<u-form labelPosition="top" :model="model" label-width="200" labelAlign="left" :rules="rules"
						ref="uForm">
						<u-form-item label="账号" prop="username">
							<u-input v-model="model.username" placeholder="请输入账号" clearable></u-input>
						</u-form-item>

						<u-form-item label="密码" prop="password">
							<u-input v-model="model.password" type="password" placeholder="请输入密码" clearable></u-input>
						</u-form-item>

						<u-form-item label="验证码" prop="code">
							<view class="code-box">
								<u-input class="code-input" v-model="model.code" placeholder="请输入验证码"
									clearable></u-input>
								<img class="img" :src="'data:image/png;base64,' + codeImg" @click="getRandomImage" />
							</view>
						</u-form-item>

						<u-form-item label="连接点" prop="conn">
							<uni-data-select v-model="model.conn" :localdata="conns" format="{label}" placeholder="请选择"
								@change="changeConn" :clear="false"></uni-data-select>
						</u-form-item>
					</u-form>
					<view class="but-box">
						<view class="btn">
							<u-button type="primary" @click="submit" text="登录"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</Content>
</template>

<script>
	import Content from "@/components/content/index.vue";
	import fetch from "@/utils/fetch";
	import {
		downloadFun
	} from "@/utils/download.js";
	import {
		setToken,
		setUserInfo,
		getUserInfo,
		getConn,
		setConn,
		setMenu,
	} from "@/store/user";

	export default {
		components: {
			Content,
		},
		data() {
			return {
				rules: {
					username: {
						type: "string",
						required: true,
						message: "请填写账号",
						trigger: ["blur", "change"],
					},
					password: {
						type: "string",
						required: true,
						message: "请填写密码",
						trigger: ["blur", "change"],
					},
					code: {
						type: "string",
						required: true,
						message: "请填写验证码",
						trigger: ["blur", "change"],
					},
					conn: {
						type: "string",
						required: true,
						message: "请填写连接点",
						trigger: ["blur", "change"],
					},
				},
				model: {
					username: "",
					password: "",
					checkKey: "",
					code: "",
					conn: "",
				},
				codeImg: "",
				conns: [],
				version: ""
			};
		},
		onShow() {
			const userInfo = getUserInfo();
			if (userInfo) {
				uni.reLaunch({
					url: "/pages/home/index",
					animationType: "pop-in",
				});
			}
		},
		onReady: function() {
			this.getRandomImage();
			this.getConns();
		},
		onShow() {},
		mounted() {
			// #ifdef APP-PLUS
			const app = uni.getSystemInfoSync();
			this.version = app.appWgtVersion;
			// #endif
		},
		methods: {
			getConns() {
				setTimeout(() => {
					this.conns = [{
						label: '外网节点', 
						value: '外网节点',
						mes: 'http://114.220.176.104:90',
						wms: 'http://114.220.176.104:91',
					}, {
						label: '内网节点',
						value: '内网节点',
						mes: 'http://172.16.100.203:90',
						wms: 'http://172.16.100.203:91',
					}, {
						label: '测试外网节点',
						value: '测试外网节点',
						mes: 'http://180.100.216.225:90',
						wms: 'http://180.100.216.225:90',
					}, {
						label: '测试内网节点',
						value: '测试内网节点',
						mes: 'http://192.168.0.134:90',
						wms: 'http://192.168.0.134:91',
					}];
					const hisConn = getConn();
					if (hisConn && this.conns.find(item => item.label === hisConn.label)) {
						this.model.conn = hisConn.label;
					} else {
						this.model.conn = this.conns[0].label;
						setConn(this.conns[0]);
					}
				}, 10);
			},
			changeConn(value) {
				const conn = this.conns.find(item => item.label === value);
				setConn(conn);
			},
			submit() {
				const that = this;
				this.$refs.uForm.validate().then((valid) => {
					if (valid) {
						that.$loading.open();
						fetch("post", "/basic/token/login", that.model)
							.then(({
								data
							}) => {
								// #ifdef H5
								// web调试直接登录
								that.$loading.close();
								uni.$emit("openToast", {
									type: "success",
									title: "登录成功",
									complete() {
										setToken(data.token);
										setUserInfo(data);
										that.getMenuList();
										setTimeout(() => {
											uni.reLaunch({
												url: "/pages/home/index",
												animationType: "pop-in",
											});
										}, 1000);
									},
								});
								// #endif

								// #ifdef APP-PLUS
								// APP检查更新再登录
								const app = uni.getSystemInfoSync();
								fetch(
									"get",
									"/basic/sys/getMobileVersion?type=app", {}, {},
									false
								).then((res) => {
									if (res.data.version !== app.appWgtVersion) {
										downloadFun("/static/file/apk/app/app.apk", () => {
											that.$loading.close();
										});
									} else {
										that.$loading.close();
										uni.$emit("openToast", {
											type: "success",
											title: "登录成功",
											complete() {
												setToken(data.token);
												setUserInfo(data);
												that.getMenuList();
												setTimeout(() => {
													uni.reLaunch({
														url: "/pages/home/index",
														animationType: "pop-in",
													});
												}, 1000);
											},
										});
									}
								});
								// #endif
							})
							.catch(() => {
								that.getRandomImage();
							});
					}
				});
			},
			getMenuList() {
				fetch("get", "/basic/menu/findPermissionByToken")
					.then(
						(res) => {
							setMenu(res.data);
						},
						() => {}
					)
					.catch(() => {});
			},
			getRandomImage() {
				this.model.checkKey = new Date().valueOf() + "";
				fetch("get", "/basic/captchaImage", "", "", true).then(({
					data
				}) => {
					this.codeImg = data.img;
					this.model.uuid = data.uuid;
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.login-box {
		position: relative;
		padding-top: 150rpx;
		height: 100vh;
		background: url(~@/static/login-bj.jpg) no-repeat;
		display: flex;
		flex-direction: column;
		background-size: cover;

		.tip {
			padding: 0 54rpx;
			height: 93rpx;
			margin-bottom: 67rpx;

			.dt {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 27rpx;
			}

			.dd {}
		}
	}

	.log {
		position: absolute;
		left: 58rpx;
		top: 40rpx;
		height: 66rpx;
		width: 50%;
	}

	.from-box {
		flex: 1;
		padding: 57rpx 60rpx;
		background-color: #ffffff;
		border-radius: 20px 20px 0 0;

		/deep/ .u-form-item__body__left__content__label {
			font-size: 34rpx;
			margin-bottom: 25rpx;
		}

		/deep/ .u-input {
			background-color: #f2f2f2;
			height: 80rpx;
			border-radius: 10px;
		}
	}

	.but-box {
		width: 100%;
		margin-top: 159rpx;
		display: flex;
		justify-content: space-between;

		.btn {
			flex: 1;

			&:first-child {
				margin-right: 40rpx;
			}
		}
	}

	.code-box {
		display: flex;
		width: 100%;

		.img {
			width: 200rpx;
			height: 80rpx;
			margin-left: 10px;
		}
	}
</style>